 <!-- 颜色选择器 -->
<template>
	<a-tooltip color="#ffffff" trigger="click">
		<template #title>
			<Chrome v-model="colors" />
		</template>
		<div class="color-inner" :style="{ backgroundColor: colors.hex }"></div>
	</a-tooltip>
</template>
<script setup>
import { Chrome } from "@ckpack/vue-color";
import { ref, watch } from 'vue' 
import { useVModelHook } from "@/hooks/useVModelHook.js";
const props = defineProps({
    hex: {
        type: Boolean,
        default: false
    },
    modelValue: {
        type: String,
        default: '',
    }
});
const emit = defineEmits(["update:modelValue"]);
// 初始值
const colors = ref({
    hex: props.modelValue
});
const rgba = useVModelHook(props, emit);
watch(colors, (n) => {
    if(n) {
        const { hex, rgba: curColor } = n
        const { r, g, b, a } = curColor
        const c = `rgba(${r},${g},${b}, ${a})`
        if(props.hex) {
            rgba.value = hex
        } else {
            rgba.value = c
        }
    }
})
</script>
<style lang="scss" scoped>
.color-inner {
	height: 20px;
	width: 20px;
	border-radius: 5px;
	cursor: pointer;
	border: 2px solid #f6f6f7;
    box-sizing: border-box;
}
</style>
